今天換來做 VUE
先前已經將ROUTER & MATERIAL套用進來，
這一次想實作封裝HTTP的功能，如 VUE官方推薦，我們要用axios。
簡單將幾個常見的API METHOD多一層打包。

安裝axios

npm i axios

建立HTTP Service

建立檔案 src/providers/http-server-user.ts

import axios from "axios";

axios.defaults.timeout = 5000;
axios.defaults.baseURL = process.env.API_ROOT; // 域名

// http request 欄截
axios.interceptors.request.use(
  config => {
    config.data = JSON.stringify(config.data);
    config.headers = { // 如果沒有cors的問題則可以都不加
      "Access-Control-Allow-Origin": process.env.API_ROOT,
      "Access-Control-Allow-Methods": "GET, PUT, POST, DELETE, OPTIONS",
      "Access-Control-Max-Age": "86400"
    };
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 異常處理
axios.interceptors.response.use(
  response => {
    return response;
  },
  err => {
    if (err && err.response) {
      switch (err.response.status) {
        case 404:
          console.log("找不到該頁面");
          break;
        case 500:
          console.log("伺服器出錯");
          break;
        case 503:
          console.log("服務失效");
          break;
        default:
          console.log(`連接錯誤${err.response.status}`);
      }
    } else {
      console.log("連接到服務器失敗");
    }
    return Promise.resolve(err.response);
  }
);

export function fetch(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params
      })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err);
      });
  });
}

export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(
      response => {
        resolve(response.data);
      },
      err => {
        reject(err);
      }
    );
  });
}

export function remove(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.delete(url, data).then(
      response => {
        resolve(response.data);
      },
      err => {
        reject(err);
      }
    );
  });
}

export function put(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.put(url, data).then(
      response => {
        resolve(response.data);
      },
      err => {
        reject(err);
      }
    );
  });
}
// 將封裝的方法打包起來
export const UserServer = {
  fetch: function(paramObj) {
    return fetch("api/users", paramObj);
  },
  post: function(paramObj) {
    return post("api/users", paramObj);
  },
  put: function(paramObj) {
    return put("api/users", paramObj);
  },
  delete: function(paramObj) {
    return remove("api/users", paramObj);
  }
};

使用

假如我要在我的 src/components/user/user-main.vue 使用

先import後就可以於method中使用。

<script lang="ts">
import { UserServer } from "../../providers/http-server-user";

@Component({})
export default class UserMain extends Vue {
  FetchUsers(filters) {
    UserServer.fetch(filters).then(
      (response) => (this.users = response)
    );
  }
}
</script>

完成

這樣的好處是可以統一處理http的事件，日後有調整的需求，也相對好處理。

幾個月前遇到angular改版，正值http轉換httpclient的時後，
當時因為沒有針對http做多一次的封裝，所以我得一個一個component的檢查，
當然，也很多重複性質的事件處理及config。
所以這一次就在專案開始前，就先針對這個問題先處理起來。